<template>
    <el-dialog :visible.sync="showOrderPrint" :append-to-body="true" :close-on-click-modal="false" width="62.6%"
        :close-on-press-escape="false" :show-close="false" class="ele-modal" :modal-append-to-body='false'>
        <div id="printOrder">
            <h4 slot="title">累计商品清单 <strong>日期：</strong>{{orderPrint.orderDate}}</h4>
            <el-table ref="multipleTable" :data="orderPrint.orderGoodsList" tooltip-effect="dark" border :cell-style="{'font-weight': 700}"
                :header-cell-style="{'background-color': '#F5F5F6'}" max-height="600" style="width: 100%">
                <el-table-column label="商品种类" prop="categoryName" width="80">
                </el-table-column>
                <el-table-column label="商品名称" prop="goodsName" width="200">
                </el-table-column>
                <el-table-column label="型号" prop="goodsPropertiesEntity.model" width="80">
                </el-table-column>
                <el-table-column label="品牌" prop="goodsPropertiesEntity.brand" width="80">
                </el-table-column>
                <el-table-column label="颜色" prop="goodsPropertiesEntity.color" width="80">
                </el-table-column>
                <el-table-column label="规格" prop="model" width="80">
                </el-table-column>
                <el-table-column label="生产商" prop="goodsPropertiesEntity.manuFacturer" width="80">
                </el-table-column>
                <el-table-column label="出产地" prop="goodsPropertiesEntity.cityName" width="80">
                </el-table-column>
                <el-table-column label="数量" prop="num" width="50">
                </el-table-column>
                <el-table-column label="单位" prop="specsName" width="50">
                </el-table-column>
            </el-table>
        </div>
        <div slot="footer" class="row" style="text-align: right;margin-right: 5px;">
            <a class="revision-btn" href="javaScript:void(0)" @click="onCancel">取 消</a>
            <a class="revision-btn" href="javaScript:void(0)" @click="onCancel" v-print="'#printOrder'">打 印</a>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "printList",
        props: {
            orderPrint: {
                type: Object
            },
            showOrderPrint: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                printTime: ''
            }
        },
        methods: {
            onCancel() {
                this.newForm = this.$options.data().newForm;
                this.$emit('onCancelOrderPrintModal');
            },
        }
    }
</script>

<style scoped>
    .product-detail-modal {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
    }

    .ele-modal /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
        padding: 5px 0 2px 15px !important;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 0 20px 30px 20px;
    }

    .ele-modal /deep/ .el-dialog__footer {
        border-top: 1px solid #e5e5e5;
        padding: 15px;
    }

    .el-table--border:after,
    .el-table--group:after,
    .el-table:before {
        background-color: #000000;
    }

    .el-table--border,
    .el-table--group {
        border-color: #000000;
    }

    .el-table td,
    .el-table th.is-leaf {
        border: 1px solid #000000;
    }

    .el-table--border th,
    .el-table--border th.gutter:last-of-type {
        border: 1px solid #000000;
    }

    .el-table--border td,
    .el-table--border th {
        border: 1px solid #000000;
    }

    >>> .el-table--border td,
    .el-table--border th,
    .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
        border: 1px solid #000000;
    }

    >>> .el-table td,
    .el-table th.is-leaf {
        border: 1px solid #000000;
    }
</style>
